/*
 * @Description: 封装成功失败弹框组件
 * @Author: buwei.huang
 * @Date: 2019-07-31 10:41:29
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-07-31 13:52:25
 */
<template>
  <mask-module
    ref="mask"
    class="flex-h flex-vc flex-hc"
    :isClickBgToHide="false"
  >
    <div
      class="ToastAlert_wrap"
      @click="clickConfirm"
    >
      <i
        class="icon iconfont baseColorNoAcitve"
        :class="success ? 'icon-seceed' : 'icon-cancel-o'"
      />
      <p class="baseColorNoAcitve">{{msgText}}</p>
    </div>
  </mask-module>
</template>
<script>
import AnimatedDialog from '@/components/animateddialog/AnimatedDialog'
export default {
  components: {
    'mask-module': AnimatedDialog
  },
  props: {
    msgText: {
      type: String,
      default: null
    },
    success: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
  computed: {
    mask() {
      return this.$refs.mask
    }
  },
  methods: {
    clickConfirm() {
      this.mask.hide()
      this.$emit('onOverflow', false)
    }
  }
}
</script>
<style>
.ToastAlert_wrap {
  width: 540px;
  height: 300px;
  background-color: #fff;
  border-radius: 16px;
  text-align: center;
  padding-top: 52px;
  box-sizing: border-box;
}
.ToastAlert_wrap .icon {
  font-size: 120px;
}
.ToastAlert_wrap > p {
  font-size: 16px; /*no*/
  line-height: 44px;
  margin-top: 32px;
}
</style>
